/**
 * Created by Administrator on 2017/3/14 0014.
 */
import React from "react";
import {Checkbox} from 'antd';
import {Switch} from 'antd';
import Confirm from "../../common/Confirm";
import PeopleItem from "./PeopleItem"
import ReactKey from "../../util/ReactKey"
import Pagination from "./Pagination"
import Util from "../../util/Util"
import UserDisabledMutation from "./mutation/UserDisabledMutation"
import Relay from "react-relay";

/*导出组件*/
export default class PeopleDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            peopleData: [],
            ischecked: false,
            totalresult: 0,
        }
        this.uidlist = [];
        this.userdisable = [];
    }

    componentWillMount() {
        this.style = {
            detail_content: {
                height: 735,
                borderTop: '1px solid #e7e7e7',
                borderRight: '1px solid #e7e7e7',
                marginTop:5,
                backgroundColor:"white"
            },
            title_1: {
                display: 'inline-block',
                width: 65,
                height: 38,
                paddingLeft: '10px',
                lineHeight: '36px',
            },
            title_11: {
                fontFamily: '新宋体',
                fontWeight: '600',
                color: '#333',
                fontSize: '14px',
                paddingLeft: '5px'
            },
            title_12: {
                width: 13,
                height: 13,
                borderRadius: '2px',
                border: '1px solid #666'
            },
            title_2: {
                display: 'inline-block',
                width: 119,
                height: 38,
                textAlign: 'center',
                lineHeight: '36px',
                fontFamily: '新宋体',
                color: '#333',
                fontSize: '14px'
            },
            title_3: {
                display: 'inline-block',
                width: 130,
                height: 38,
                textAlign: 'center',
                lineHeight: '36px',
                fontFamily: '新宋体',
                color: '#333',
                fontSize: '14px'
            },
            title_4: {
                display: 'inline-block',
                width: 130,
                height: 38,
                textAlign: 'center',
                lineHeight: '36px',
                fontFamily: '新宋体',
                color: '#333',
                fontSize: '14px'
            },
            title_5: {
                display: 'inline-block',
                width: 180,
                height: 38,
                textAlign: 'center',
                lineHeight: '36px',
                fontFamily: '新宋体',
                color: '#333',
                fontSize: '14px'
            },
            title_6: {
                display: 'inline-block',
                width: 196,
                height: 38,
                textAlign: 'center',
                lineHeight: '36px',
                fontFamily: '新宋体',
                color: '#333',
                fontSize: '14px'
            },
            title_7: {
                display: 'inline-block',
                width: 200,
                height: 38,
                textAlign: 'center',
                lineHeight: '36px'
            },
            title_71: {
                fontFamily: '新宋体',
                color: '#333',
                fontSize: '14px'
            },
            page_ensure: {
                width: '39px',
                height: '19px',
                backgroundColor: "white",
                border: '1px solid #e7e6e6',
                borderRadius: '2px',
                color: "#999"
            }
        }
        this.setState({
            // peopleData:this.props.peopleData||[]
        })
    }

    //全选
    handleclick(is) {
        this.uidlist = []
        if (is) {
            this.state.peopleData.map((context, index) => {
                this.refs['pitem' + index].checkischose();
                this.refs['pitem' + index].int = 0
                this.uidlist.push(this.refs['pitem' + index].uid)
            });
        } else {
            this.state.peopleData.map((context, index) => {
                this.refs['pitem' + index].checkisunchose();
                this.refs['pitem' + index].int = 1
            });
        }
        this.props.getchosepeople(this.uidlist)
        // console.warn(this.uidlist.join(','));
    }

    isallclick(uid) {
        let total = 0
        if (this.uidlist.indexOf(uid) < 0) {
            this.uidlist.push(uid)
        } else {
            Util.removedarrayitem(this.uidlist, uid)
        }
        this.state.peopleData.map((context, index) => {
            total = total + this.refs['pitem' + index].int;
        });
        if (total != 0) {
            this.refs.allcheck.unchose();

        }
        this.props.getchosepeople(this.uidlist)
    }

    onSure(size, num) {
        this.props.serchpeople(size, num)
    }

    initpagenum() {
        this.refs.pagination.setState({
            text: 1
        });
    }

    forbiddenandstart(is, index, uid) {
        let status
        if (is) {
            this.refs['pitem' + index].setState({
                status: 1
            });
            status = 1
        } else {
            this.refs['pitem' + index].setState({
                status: 0
            });
            status = 0
        }
        Relay.Store.commitUpdate(
            new UserDisabledMutation({
                status: status,
                ids: uid
            }),
            {
                onFailure: () => {

                },
                onSuccess: (response) => {
                    let errorCode = response.userDisabled.userDisabled.errorCode
                    if (errorCode == 0) {
                        this.refs['pitem' + index].switchcontrol(is)
                    }

                    this.onSure(10, this.refs.pagination.state.text);
                }
            }
        );
    }
    ///asdasdasd
    render() {
        this.datasize = this.state.peopleData.length;
        return (
            <div>
                <div style={this.style.detail_content}>
                    <table className="people_people-table">
                        <thead>
                            <tr style={{height: "40px", background: "#f2f2f2"}}>
                                <th className="people_table-title">用户ID</th>
                                <th className="people_table-title">会员名称</th>
                                <th className="people_table-title">所属公司</th>
                                <th className="people_table-title">手机号</th>
                                <th className="people_table-title">创建时间</th>
                                <th className="people_table-title"> 状态</th>
                                <th className="people_table-title" style={!Util.authorityCheck("people") ? {display: 'none',width: 86, border: "1px solid #e7e7e7"} :{width: 86, border: "1px solid #ccc"}}>编辑</th>
                                {/*<th style={!Util.authorityCheck("people") ? {display: 'none',width: 86, border: "1px solid #ccc"} :{width: 86, border: "1px solid #ccc"}}>启用/禁用</th>*/}
                            </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.peopleData.map((ele, index) => {
                                    return <PeopleItem ele={ele} key={ ReactKey.key } ref={'pitem' + index}
                                                       isallclick={this.isallclick.bind(this)} index={index}
                                                       forbiddenandstart={this.forbiddenandstart.bind(this)}
                                                       editstaffinfo={this.props.editstaffinfo}/>
                                }
                            )
                        }
                        </tbody>
                    </table>

                    {/*循环输出详细的人员数据*/}


                    <Pagination eachSize={10} dataSize={this.state.totalresult} onSure={this.onSure.bind(this)}
                                ref={'pagination'}/>

                </div>
            </div>
        )
    }
}

class AllCheckbox extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            ischecked: false
        }
    }

    unchose() {
        this.setState({
            ischecked: false
        });
    }

    handleclick(e) {
        let is = e.target.checked;
        this.setState({
            ischecked: is
        });


        this.props.handleclick(is);
    }

    render() {
        return (
            <th style={{width: 82, border: "1px solid #ccc"}}><Checkbox onClick={this.handleclick.bind(this)}
                                                                        checked={this.state.ischecked}><span
                className="bodrer1">全选</span></Checkbox></th>
        );
    }
}